<template>
	<view>
		<view class="recommend_title" v-if="showView"><text>为你推荐</text></view>
		<waterfall-goods ref="recommend_waterfall" :list="goodsDataList"></waterfall-goods>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import waterfallGoods from '@/components/module/waterfall_goods';
	export default {
		props: {
			type: {
				type: [Number, String],
				default: function() {
					return 1101;
				}
			}
		},
		components: {
			waterfallGoods
		},
		data() {
			return {
				pageNo: 1,
				pages: 1,
				goodsDataList: [],
				showView: false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		mounted() {
			if (this.userInfo.token) {
				this.loadData();
			}
		},
		//方法
		methods: {
			loadData() {
				if (this.pageNo <= this.pages) {
					let httpData = {
						pageNo: this.pageNo,
						pageSize: 15,
						sortType: 3004
					};
					if (this.type) {
						httpData.locatType = this.type;
					}
					this.$http.post('api/mall/goods/v1/list', httpData, {
						load: false,
						loadMore: false
					}).then(res => {
						uni.stopPullDownRefresh();
						this.pages = res.pages;
						if (this.pageNo == 1) {
							this.goodsDataList = res.data;
						} else {
							this.goodsDataList = this.goodsDataList.concat(res.data);
						}
						if (res.data.length > 0) {
							this.showView = true;
							this.pageNo = this.pageNo + 1;
						}
					});
				}
			},
			loadMore() {
				this.loadData();
			},
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.recommend_title {
		display: flex;
		padding: 30rpx;
		display: flex;
		justify-content: center;
		// align-items: center;

		text {
			font-size: 32rpx;
			color: $themeColor;
			margin: 0 20rpx;
		}

		&:after,
		&:before {
			content: "♥";
			color: $themeColor;
			// width: 10rpx;
			// height: 10rpx;
		}
	}
</style>
